<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>单个属性展示方式1：变量.属性</h1>
<div>
    用户姓名:<input th:id="${user.username}" th:name="${user.username}" th:value="${user.username}"/>
    <br/>
    用户年龄:<input th:value="${user.age}"/>
    <br/>
    用户生日:<input th:value="${user.birthday}"/>
    <br/>
    用户生日:<input th:value="${#dates.format(user.birthday,'yyyy-MM-dd')}"/><!--时间格式转换-->
    <br/>
</div>

<h1>单个属性展示方式2：先定义全局变量，然后直接使用属性</h1>
<div th:object="${user}"><!--定义一个对象,指定为user,下面的user都可以省略不写-->
    用户姓名:<input th:id="*{username}" th:name="*{username}" th:value="*{username}"/>
    <br/>
    用户年龄:<input th:value="*{age}"/>
    <br/>
    用户生日:<input th:value="*{#dates.format(birthday,'yyyy-MM-dd')}"/><!--时间格式转换-->
    <br/>
</div>

<h1> th:text(不会进行转译)与 th:utext(会进行转译)属性的区别</h1>
<!-- th:text 不会进行转译 -->
<span th:text="${user.desc}"></span>
<br/>
<!-- th:utext 会进行转译 -->
<span th:utext="${user.desc}"></span>

<h1>URL 示例</h1>
<a th:href="@{http://www.baidu.com}" th:target="_blank">百度一下</a>

<h1>表单提交示例</h1>
<form th:action="@{/th/save}" th:object="${user}" th:method="post">
    <input type="text" th:field="*{username}"/>
    <!--th:field="*{name}"相当于id="name" name="name" value="具体的name值"-->
    <input type="submit"/>
</form>

<h1>lt(小于)、ge(大于等于)示例</h1>
<!-- lt(小于) -->
<div th:if="${user.age lt 25}">young</div>
<!-- ge(大于等于) -->
<div th:if="${user.age ge 25}">old</div>

<h1>表格展示后端数据</h1>
<table>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>年龄备注</th>
        <th>生日</th>
    </tr>
    <tr th:each="user:${userList}">
        <!-- 循环 userList，以 user 作为形参 -->
        <td th:text="${user.username}"></td>
        <td th:text="${user.age}"></td>
        <td th:text="${user.age ge 25} ? old : young"></td>
        <td th:text="${#dates.format(user.birthday,'yyyy-MM-dd hh:mm:ss')}"></td>
    </tr>
</table>

<h1>switch...case...示例</h1>
<div th:switch="${user.password}">
    <p th:case="'chenyu'">沉鱼</p>
    <p th:case="'luoyan'">落雁</p>
    <p th:case="'biyue'">闭月</p>
    <p th:case="'xiuhua'">羞花</p>
</div>
</body>
</html>